<template>
  <div>
      <!-- 水泥浆设计 -->
      <el-row>
        <!-- 查询栏 -->
        <el-form :inline="true" :model="searchModel">
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-input placeholder="请填写井名" v-model="searchModel.wellName" clearable maxlength="20" />
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.wellType" clearable placeholder="请选择井型">
                        <el-option
                        v-for="item in wellClassesOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                        :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                    <el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
                         <el-option
                            v-for="item in wellTypeOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="16" :md="16" :lg="8" :xl="5">
                <el-form-item>
                    <el-date-picker
                    v-model="searchModel.startDrillDate"
                    type="date"
                    align="right"
                    value-format="yyyy-MM-dd"
                    style="width: 47%"
                    placeholder="开始日期">
                    </el-date-picker>
                    <span style="color: #C0C0C0">&nbsp;-&nbsp;</span>
                    <el-date-picker
                    v-model="searchModel.endDrillDate"
                    type="date"
                    align="right"
                    value-format="yyyy-MM-dd"
                    style="width: 47%"
                    placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :sm="4" :md="4" :lg="2" :xl="1">
                <el-form-item>
                    <el-button type="primary" @click="submitSearchModel">查询</el-button>
                </el-form-item>
            </el-col>
            <el-col :sm="4" :md="4" :lg="2" :xl="1">
                <el-form-item>
                    <el-button type="success" @click="submitAddModel" >新增</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-row>
    <!-- 查询结果表格展示 -->
    <el-row style="width: 100%">
        <el-table
            :data="tableData"
            border
            style="width: 100%; font-size: 10px"
            :max-height="tableHeight"
            :header-row-style="rowStyle"
            :header-cell-style="cellStyle"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            stripe
        >
            <el-table-column
                v-if="tableHead[0]"
                :label="tableHead[0].label"
                :prop="tableHead[0].property"
                width="100"
                align="center"
                fixed="left"
            />
            <el-table-column
                v-for="(item, index) in tableHead.slice(1)"
                :label="item.label"
                :property="item.property"
                :key="index"
                width="90"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column label="操作" align="left">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 显示页数 -->
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="pageIdx"
                :page-size="pageSizes"
                :total="totalData"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="基础数据修改" :visible.sync="editVisible" width="60%">
            <el-form :model="form" ref="form" label-width="130px">
                <!-- 自定义编辑内容样式 -->
                <el-col :span="12" :offset="12" :pull="12">
                    <el-form-item label="井名">
                        <template> 
                        <el-select v-model="form.wellname" clearable placeholder="请选择包名" style="width:100%"> 
                            <el-option
                            v-for="item in wellNameOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="钻头尺寸">
                        <template> 
                        <el-select v-model="form.bitsize" clearable placeholder="请选择钻头尺寸" style="width:100%"> 
                            <el-option
                            v-for="item in bitSizeOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="套管层次">
                        <template> 
                        <el-select v-model="form.caselevel" clearable placeholder="请选择套管层次" style="width:100%"> 
                            <el-option
                            v-for="item in caselevelOptions"
                            :key="item"
                            :label="item"
                            :value="item"
                            :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="体系供应商">
                        <el-input v-model="form.supply"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="体系名称">
                        <el-input v-model="form.formula"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密度">
                        <el-input v-model="form.density"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="流变度">
                        <el-input v-model="form.fluidity"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="失水量">
                        <el-input v-model="form.lostwater"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="45度倾斜角自由液">
                        <el-input v-model="form.freewater"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="过渡时间">
                        <el-input v-model="form.temptime"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="24h抗压强度">
                        <el-input v-model="form.pressure24"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="48h抗压强度">
                        <el-input v-model="form.pressure48"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="72h抗压强度">
                        <el-input v-model="form.pressure72"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="封固井段">
                        <el-input v-model="form.pressure48"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="稠化时间">
                        <el-input v-model="form.solidtime"></el-input>
                    </el-form-item>
                </el-col>
                <!-- 此处还可以添加内容 -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNew" v-if="isNewData">确 定</el-button>
                <el-button type="primary" @click="saveEdit" v-else>确 定</el-button>
            </span>
        </el-dialog>
    </el-row>
  </div>
</template>

<script>
import {
	GetDataClassificationMenus,
	GetTableHead,
	GetTableData,
	ListDataDictByCondition,
    GetWellList
} from '../../../../../api/module/dataClassification/data_classification'
import {
	CementsluryDesignUpdate,
    CementsluryDesignDelete,
    FindCementsluryDesignByCondition,
    CementsluryDesignAdd
} from '../../../../../api/module/dataClassification/wellSementDesign/slurryDesign/cementslury_design'
export default {
    data() {
        return {
            menuName: this.$route.query.menuName,  //页面跳转获取的页面名称
            //查询行的数据
            searchModel: { //查询部分默认的绑定值
				wellName: '', //井名
				wellType: '', //井型
				wellCategory: '', //井别
                startDrillDate: '', //开钻日期
                endDrillDate: '', //完钻日期
                currentPage: 1, //当前页
				pageSize: 10 //页大小
			},
            //下拉框字典
            wellTypeOptions: [], //井型
            wellClassesOptions: [], //井别
            caselevelOptions: [], //套管层次
            wellNameOptions: [], //井名
            bitSizeOptions: [], //钻头尺寸
            //表格数据
            tableData: [], 
            tableHead: [],
            //分页条数据
            pageIdx: 1,
			pageSizes: 10,
			totalData: 0,
            //table展示数据（样式）
            tableHeight: this.$route.query.tableHeight,
            rowStyle: { height: '30px' },
            cellStyle: {
				padding: 0,
				// 'border-bottom': '1px solid #111111',
				// 'border-right': '1px solid #111111'
			},
            //编辑框数据
            editVisible: false,
			form: {},//每行数据
            idx: -1,//修改行id
            //新增和编辑的判断
            isNewData: false 
        }
    },
    created() {
        // console.log("menuName: " + this.$route.query.menuName)
        //开始查询表数据
        this.getTableHead()
        this.getTableData()
    },
    mounted() {
    },
    methods: {
        // 获取表头
        getTableHead () {
          GetTableHead(this.menuName)
            .then(res => {
              this.tableHead = res.data
              // console.log(this.tableHead);
              //获取到表头后，获取下拉框
                        this.ListDataDictByConditionWellType()//井型字典
                        this.ListDataDictByConditionWellClasses() //井别字典
                        this.ListDataDictByConditionCaselevel() //套管层次
                        this.GetWellList() //井名下拉列表
                        this.ListDataDictByConditionbitSize() //钻头尺寸
            })
            .catch(err => {
              console.log("获取表头" + err);
              this.$message.error('查询出错，请刷新！')
            })
        },
        // 获取表格数据
        getTableData () {
          GetTableData(
            this.menuName,
            this.pageIdx,
            this.pageSizes,
            this.searchModel
          )
                .then(res => {
                    //console.log(res)
                    if (res.data) {
                        this.tableData = res.data.data
                        // console.log(this.tableData)
                    } else {
                        this.tableData = []
                    }
                    this.totalData = res.data.total
                })
                .catch(err => {
                    console.log("获取表格数据" + err)
                    this.$message.error('查询出错，请刷新！')
                })
        },
        //获取井型下拉列表
        ListDataDictByConditionWellClasses() {
            ListDataDictByCondition("井型")
            .then(res => {
                // console.log(res.data)
                this.wellClassesOptions = res.data
            })
        },
        //获取井别下拉列表
        ListDataDictByConditionWellType() {
            ListDataDictByCondition("井别")
            .then(res => {
                // console.log(res.data)
                this.wellTypeOptions = res.data
            })
        },
        //获取钻头尺寸 
        ListDataDictByConditionbitSize() {
            ListDataDictByCondition("钻头尺寸")
            .then(res => {
                // console.log(res.data)
                this.bitSizeOptions = res.data
            })
        },
        //获取套管层次 
        ListDataDictByConditionCaselevel() {
            ListDataDictByCondition("套管层次")
            .then(res => {
                // console.log(res.data)
                this.caselevelOptions = res.data
            })
        },
        //井眼列表
        GetWellList() {
            GetWellList()
            .then(res => {
                // console.log(res.data)
                this.wellNameOptions = res.data
            })
        },
        //保存新增数据
        CementsluryDesignAdd() {
            CementsluryDesignAdd(this.form) 
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("新增数据" + err)
                this.$message.error('保存出错，请刷新！')
            })
        },
        //保存修改数据
        CementsluryDesignUpdate() {
            // console.log(this.form)
            CementsluryDesignUpdate(this.form)
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("保存数据" + err)
                this.$message.error('保存出错，请刷新！')
            })
        },
        //删除数据
        CementsluryDesignDelete(cementslurydesignid) {
            // console.log(cementslurydesignid)
            CementsluryDesignDelete(cementslurydesignid) 
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log("删除数据" + err)
                this.$message.error('删除出错，请刷新！')
            })
        },
        //查询数据
        FindCementsluryDesignByCondition() {
            // console.log(this.searchModel)
            FindCementsluryDesignByCondition(this.searchModel)
            .then(res => {
                // console.log("res: " + res.data)
                this.tableData = res.data.records
                this.totalData = res.data.total
            })
            .catch(err => {
                console.log("查询数据" + err)
                this.$message.error('查询出错，请刷新！')
            })
        },
        //新增数据
        submitAddModel () {
            this.editVisible = true
            this.isNewData = true
            this.form = {}
        },
        //保存新增
        saveNew() {
            //新增的代码
            this.editVisible = false
            if(this.form.wellname == null || this.form.wellname == "") {
                this.$message.error(`新增数据包名为空，新增失败！`)
            } else {
                this.$message.success(`新增成功`)
                this.CementsluryDesignAdd()
                this.FindCementsluryDesignByCondition() //将展示内容修改
            }
        },
        //点击查询
        submitSearchModel () {
			this.pageIdx = 1
            this.currentPage = 1
			this.FindCementsluryDesignByCondition()
            this.$message.success('查询数据成功！')
		},
        // 点击具体行数据--编辑
		handleEdit (index, row) {
			this.editVisible = true
            this.isNewData = false
            this.idx = index
			this.form = row
			// console.log(index,row);
		},
        // 保存编辑数据
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`)
            this.$set(this.tableData, this.idx, this.form) //将展示内容修改
            //修改数据库数据操作
            this.CementsluryDesignUpdate()
        },
		//点击具体行数据--删除
		handleDelete (index, row) {
			// console.log(index)
            // console.log(row)
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$message.success('删除成功')
                this.tableData.splice(index, 1)
                //删除数据库数据操作
                this.CementsluryDesignDelete(row.cementslurydesignid)
            })
            .catch(() => {});
		},
        // 分页导航
        handlePageChange(page) {
            // this.$set(this.pageIdx, page)
            this.pageIdx = page
            this.currentPage = page
            // console.log(this.pageIdx)
            this.FindCementsluryDesignByCondition()
        }
    }
}
</script>

<style>

</style>